<div class="b-settings-filters g-ui-user-select-none">
	<div class="form-horizontal">
		<div class="legend">
			<span class="i18n" data-i18n="SETTINGS_FILTERS/LEGEND_FILTERS"></span>
			&nbsp;&nbsp;&nbsp;
			<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: filters.loading"></i>
		</div>
	</div>
	<div class="row" data-bind="visible: inited() && !serverError()">
		<div class="span5 width100-on-mobile">
			<a class="btn" data-bind="click: addFilter">
				<i class="icon-plus"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
			</a>
			&nbsp;&nbsp;
			<a class="btn" data-tooltip-join="top" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
				css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
				<i class="icon-file-code"></i>
			</a>
			&nbsp;&nbsp;
			<a class="btn hide-on-disabled-command" data-placement="bottom" data-join="top"
				data-bind="command: saveChanges, tooltipErrorTip: saveErrorText, css: {'btn-danger': '' !== saveErrorText()}">
				<i data-bind="css: {'icon-floppy': !filters.saving(), 'icon-spinner animated': filters.saving()}"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_SAVE"></span>
			</a>
		</div>
	</div>
	<div class="row" data-bind="visible: haveChanges">
		<div class="span8 width100-on-mobile">
			<br />
			<div class="alert g-ui-user-select-none" style="margin-bottom: 0">
				<i class="icon-warning"></i>
				&nbsp;&nbsp;
				<span class="i18n" data-i18n="SETTINGS_FILTERS/CHACHES_NEED_TO_BE_SAVED_DESC"></span>
			</div>
		</div>
	</div>
	<div class="row" data-bind="visible: serverError">
		<div class="span8 width100-on-mobile">
			<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
				<i class="icon-warning"></i>
				&nbsp;&nbsp;
				<span data-bind="text: serverErrorDesc"></span>
			</div>
		</div>
	</div>
	<br />
	<br />
	<div class="row">
		<div class="span8 width100-on-mobile">
			<div class="control-group" data-bind="css: {'error': filterRaw.error}, visible: inited() && filterRaw.allow() && filterRaw.active()">
				<div class="controls">
					<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
						<b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
						<span data-bind="text: filterRaw.capa"></span>
					</pre>
					<textarea class="span8" style="height: 300px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"
						data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
				</div>
			</div>
			<div class="filters-list-wrp">
				<div class="filters-list-top-padding"></div>
					<table class="table table-hover list-table filters-list g-ui-user-select-none"
						data-bind="visible: inited() && (!filterRaw.active() || !filterRaw.active()), i18nUpdate: filters">
						<colgroup>
							<col style="width: 30px" />
							<col style="width: 16px" />
							<col />
							<col style="width: 140px" />
							<col style="width: 1%" />
						</colgroup>
						<tbody data-bind="sortable: {data: filters, options: scrollableOptions('.filters-list-wrp')}" style="width: 600px">
							<tr class="filter-item">
								<td>
									<span class="disabled-filter" data-bind="click: function () { $root.haveChanges(true); enabled(!enabled()); }">
										<i data-bind="css: {'icon-checkbox-checked': enabled, 'icon-checkbox-unchecked': !enabled()}"></i>
									</span>
								</td>
								<td class="drag-wrapper">
									<i class="icon-braille drag-handle"></i>
								</td>
								<td class="e-action">
									<span class="filter-name" data-bind="text: name()"></span>
									&nbsp;&nbsp;
									<span class="filter-sub-name" data-bind="text: nameSub()"></span>
								</td>
								<td>
									<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oFilter) { $root.deleteFilter(oFilter); }">
										<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
									</a>
								</td>
								<td>
									<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
										<i class="icon-trash"></i>
									</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>